import React, { Component } from 'react'
import './css/01-index.css'

export default class App extends Component {
  a = 100

  // myref = React.createRef();

  state = {
    list : ["aa", "bb", "cc"],
    mylist: [{
      id: 1,
      mytext:"aaa",
      isChecked: false
    },
    {
      id: 2,
      mytext:"bbb",
      isChecked: false
    },
    {
      id: 3,
      mytext:"ccc",
      isChecked: false
    },
  ],
    mytext:""
  }

  render() {
    return (
      <div>
        <input value={this.state.mytext} onChange = {(evt) => {
          this.setState({
            mytext: evt.target.value
          })
        }}/>
        <button onClick ={ this.handleClick2}>add1</button>
        <ul>
          {
            this.state.mylist.map((item, index) => 
              <li key={item.id}>
                <input type="checkbox" checked = {item.isChecked}  onChange = {() => this.handleChecked(index)} />
                {/* {item} */}
                {/* 富文本展示 */}
                <span dangerouslySetInnerHTML={
                  {
                    __html:item.mytext
                  }
                } style={{textDecoration: item.isChecked ?  "line-through" : ""}}></span>
                <button onClick={() => this.handleDelClick(index)}>del</button>
              </li>
            )
          }
        </ul>
        {/* {this.state.list.length===0 ? <div>暂无代办事项</div> : nu  ll } */}
        {/* {this.state.list.length===0 && <div>暂无代办事项</div> }  */}
        <div className={this.state.mylist.length===0 ? '' : 'hidden'}>暂无代办事项</div>
      </div>
    )
  }

  handleChecked = (index) => {
    let newlist = [...this.state.mylist];
    newlist[index].isChecked = !newlist[index].isChecked;
    this.setState({
      mylist: newlist
    })
  }

  handleClick2 = () => {
    // console.log("click2", this.myref.current.value);
    let newlist = [...this.state.mylist];
    newlist.push({
      id: Math.random() * 10000000,
      mytext: this.state.mytext
    });
    this.setState({
      mylist: newlist,
      mytext: ""
    })
    // this.myref.current.value = "";
  }

  handleDelClick = (arg) => {
    console.log("del click", arg);
    let newlist = this.state.mylist.slice();
    // 和上面一条语句一样的效果
    // this.state.list.concat()
    newlist.splice(arg, 1);

    this.setState({
      mylist: newlist
    })
  }

}
